<template>
  <div class="home">
    <div class="left">
      <ul>
        <li v-on:click="toRight(1)">电影</li>
        <li v-on:click="toRight(2)">动漫</li>
        <li v-on:click="toRight(3)">综艺</li>
        <li v-on:click="toRight(4)">军事</li>
      </ul>
      <router-link to="/home/com" tag="p">我的组件</router-link>
      <router-link to="/home/mypage" tag="p">组件传参</router-link>
      <router-link to="/home/slot" tag="p">插槽</router-link>
      <router-link to="/home/life" tag="p">子组件的生命</router-link>
      <router-link to="/home/ref" tag="p">ref</router-link>
      <router-link to="/home/bro" tag="p">兄弟</router-link>
      <router-link to="/home/ancestry" tag="p">祖孙传参</router-link>
      <router-link to="/home/elementone" tag="p">elementone</router-link>
      <router-link to="/home/elementtwo" tag="p">elementtwo</router-link>
      <router-link to="/home/elementthree" tag="p">elementthree</router-link>
      <router-link to="/home/object" tag="p">vue响应式的弊端</router-link>
      <router-link to="/home/dynamic" tag="p">动态切换组件</router-link>
      <router-link to="/home/sass" tag="p">sass</router-link>
      <router-link to="/home/axios" tag="p">axios</router-link>
      <router-link to="/home/madaha" tag="p">madaha</router-link>
    </div>
    <div class="right">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
//成功的 用 绿色
//正常的 用蓝色
//警告的用红色
export default {
  data() {
    return {};
  },
  methods: {
    toRight(val) {
      if (val == 1) {
        this.$router.push({
          path: "/home/movie",
        });
      }
      if (val == 2) {
        this.$router.push({
          path: "/home/dongman",
        });
      }
      if (val == 3) {
        this.$router.push({
          path: "/home/zongyi",
        });
      }
      if (val == 4) {
        this.$router.push({
          path: "/home/arm",
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  width: 100vw;
  height: 100vh;
  background-color: #ccc;
  display: flex;
  flex-direction: row;
  .left {
    width: 240px;
    height: 100%;
    background-color: skyblue;
  }
  .right {
    width: calc(100% - 240px);
    height: 100%;
    background-color: pink;
  }
}
</style>